
// =======查询参数的对象
let query = {
    pagenum: 1,     // 是	int	页码值
    pagesize: 2,    // 	是	int	每页显示多少条数据
    cate_id: "",    // 否	string	文章分类的 Id
    state: "",      // 否	string	文章的状态，可选值有：已发布、草稿
};
// todo  ========获取列表数据
getArtList();
// 封装函数
function getArtList() {
    axios.get("/my/article/list",
        { params: query }).then(res => {
            // console.log(res);

            let newArr = res.data.data.map(item => {
                return ` <tr>
           <td>${item.title}</td>
           <td>${item.cate_name}</td>
           <td>${item.pub_date}</td>
           <td>${item.state}</td>
           <td>
               <button type="button" class="layui-btn layui-btn-xs btn_edit"
                   data-id="${item.Id}">编辑</button>
               <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete"
                   data-id="${item.Id}">删除</button>
           </td>
       </tr>`
            })
            $("#list").html(newArr.join(''));
            // 渲染分页，这里可以得到数据总数
            renderPage(res.data.total);
        });
}

// todo =====获取列表数据，填充到下拉框 
let form = layui.form;
axios.get('/my/article/cates').then(({ data }) => {
    // console.log(data);
    // 
    const newArr = data.data.map(({ Id, name }) =>
        // value值设置对应的Id
        `<option value="${Id}">${name}</option>`
    ).join('')
    // console.log(newArr);
    $("#cateSelect").append(newArr);
    //刷新select选择框渲染
    form.render('select');
})

// todo =====筛选功能
$("#form").on("submit", function (e) {
    e.preventDefault();

    // console.log($("#cateSelect").val()); 
    // console.log($("#stateSelect").val());

    // 在发送请求之前，还需要
    // 修改下query查询参数里面的cate_id 以及 state 值
    // 需要获取下拉框的值 => val() 来获取
    query.cate_id = $("#cateSelect").val();
    query.state = $("#stateSelect").val();

    // 筛选的时候，筛选出第一页的数据来查看(解决小bug)  
    query.pagenum = 1;

    // 获取列表数据
    getArtList();
});

//  todo ========分页功能
// 加载 laypage 模块
const laypage = layui.laypage;
// 
function renderPage(total) {
    //执行一个laypage实例
    laypage.render({
        elem: 'page-box' //注意，这里的 page-box 是 ID，不用加 # 号
        , count: total //数据总数，从服务端得到
        , limit: query.pagesize // 每页显示条数
        , limits: [1, 2, 3, 5, 7, 10, 99] // 每页条数的选择项。
        , curr: query.pagenum // 当前页

        // 自定义排版。可选值有：
        // count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、
        // limit（条目选项区域）、skip（快捷跳页区域、 refresh（页面刷新区域。注意：layui 2.3.0 新增） ）
        , layout: ['count', 'limit', 'prev', 'page', 'next', , 'skip']
        // 当分页被切换时触发
        , jump: function (obj, first) {

            // jump 回调函数的触发时机
            // 第一种情况. laypage.render 初始化渲染分页的时候就会触发一次  参数first 为 true
            // 第二种情况. 点击分页切换的时候，也会触发,  参数first 为 undefined

            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 点击分页，需要加载对应分页的数据
            // 1. 修改query对象的pagenum页码值为当前页
            query.pagenum = obj.curr;
            // 2. 发送ajax请求获取到数据
            query.pagesize = obj.limit;

            // 首次（初始化渲染分页的时候）不执行
            if (!first) {
                // 点击分页才执行
                // console.log("点击了分页");
                getArtList();
            }
        }
    });
}

// todo ======删除功能
//  事件委托给 tbody (id=list)
$("#list").on('click', '.btn_delete', function () {
    // 获取删除按钮的id
    const id = $(this).attr("data-id")
    //eg1
    layer.confirm('确定此文章删除吗?', { icon: 3, title: '提示' }, function (index) {
        //do something
        // 发送axios
        axios.get("/my/article/delete/" + id).then(res => {
            if (res.data.status !== 0) {
                // 删除失败
                return layer.msg(res.data.message)
            }
            // 删除成功
            layer.msg(res.data.message);

            // 删除的是最后一页的最后一条数据，返回上一页数据
            // 思路：删除按钮的个数，页码最小值为1
            if ($('.btn_delete').length === 1) {
                if (query.pagenum < 1) {
                    query.pagenum = 1;
                }
                query.pagenum = query.pagenum - 1; //返回上一页数据
            }

            // 关闭弹窗
            layer.close(index);
            // 获取列表数据
            getArtList();
        })

    });
})

// todo ============编辑功能

$("#list").on('click', '.btn_edit', function () {
    // 获取id
    const id = $(this).attr("data-id")
    //    跳转到编辑页面
    // 在地址后面带上id => 目的 ：art_edit 页面可以获取到url地址上的文章id
    location.href = "/article/art_edit.html?id=" + id;
})